<template>
  <div class="info_template">

    <!--面包屑导航模板-->
    <el-breadcrumb class="topNav" separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>

    <!--标题模板-->
    <el-row>
      <el-col :span="24"><div class="title-template">基本信息</div></el-col>
    </el-row>


    <div class="info-template-content">
      <el-row class="item-row">
        <el-col :span="3" style="color: #666">项目名称</el-col>
        <el-col :span="19" style="color: #333">的时光但是风格但是风格地方gd Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, cum exercitationem fugiat harum minima possimus ratione rem unde. Libero provident repellendus velit voluptatum. Cum itaque laborum maiores praesentium, quisquam repellat! </el-col>
      </el-row>
      <el-row class="item-row">
        <el-col :span="3" style="color: #666">项目名称</el-col>
        <el-col :span="19" style="color: #333">收费项目2</el-col>
      </el-row>
      <el-row class="item-row" style="margin-bottom:0">
        <el-col :span="3" style="color: #666">项目</el-col>
        <el-col :span="19" style="color: #333">收费项目2</el-col>
      </el-row>
    </div>

  </div>
</template>

<script>

  export default {
    data(){
      return{

        labelPosition:'left',
        form: {
          name: '',
          region: '',
          beginDate: '',
          endDate: '',
          desc: '',
          checkList:[],
          checkAll:false,
          isIndeterminate: true
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择项目类型', trigger: 'change' }
          ],
          beginDate: [
            { type: 'date', required: true, message: '请选择开始日期', trigger: 'change' }
          ],
          endDate: [
            { type: 'date', required: true, message: '请选择结束日期', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写项目描述', trigger: 'blur' }
          ]
        },

      }
    },
    methods:{
      submitForm(formName) {
//        this.$refs[formName].validate((valid) => {
        this.$refs[formName].validate(
          function(valid) {
            if (valid) {
              alert('submit!');
            } else {
//            console.log('error submit!!');
              return false;
            }
          });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    }
  }
</script>

<style scoped>
  .info_template .topNav{
    margin-left: 30px;
    margin-bottom: 20px;
  }
  .info_template .title-template{
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    padding-left: 30px;
    margin-bottom: 10px;
    color: #333333;
    background: #ffffff;
  }

  .info-template-content{
    background: #ffffff;
    padding: 50px;
  }
  .item-row{
    margin-bottom: 50px;
    font-size: 16px;
  }

</style>

